<template>
  <div class="identity-details-dialog">
    <div class="identity-details">
      <img src="" class="identity-details-image">
      <div class="identity-details-video-name">CDHG监控001</div>
      <div class="identity-details-item">
        <div class="identity-details-item-title"><span></span>最新出现</div>
        <div class="identity-details-item-content">
          <div>时间：2021-8-13 15:56:20</div>
          <div>地点：食堂711门口人脸</div>
        </div>
      </div>
      <div class="identity-details-item">
        <div class="identity-details-item-title"><span></span>首次出现</div>
        <div class="identity-details-item-content">
          <div>时间：2021-8-13 15:56:20</div>
          <div>地点：食堂711门口人脸</div>
        </div>
      </div>
    </div>
    <div class="monitor-list">
      <div class="monitor-list-item" v-for="(item, index) in 6" :key="index">
        <div class="monitor-list-item-top">
          <img src="@/assets/images/personalFiles/warning-icon.png" class="warning-icon">
          <img src="" class="left-img"/>
          <div class="monitor-list-item-top-center">
            <div>92.62%</div>
            <div>相识度</div>
            <div>
              <screen-line-progress width="100%" :height="6" :percent="82.62" bg-color="#060F41" active-color="linear-gradient(to right, #007AEC, #53FDFF)" borderRadius="4px"> </screen-line-progress>
            </div>
          </div>
          <img src="" class="right-img"/>
        </div>
        <div class="monitor-list-item-bottom">
          <div class="time">识别时间：2021-07-08 15:20:41</div>
          <div class="addr">识别地点：食堂711门口1号人脸 <img src="@/assets/images/personalFiles/jiankong.png" /></div>
        </div>
      </div>
      <div class="monitor-list-footer">
        <el-pagination
          popper-class="page"
          background
          layout="prev, pager, next"
          :total="100">
        </el-pagination>
      </div>
    </div>
    <div class="action-track-map" id="map-container"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
// @ts-ignore
import FaceEarlyWarning from '../../../../situationalAwareness/basic/FaceEarlyWarning.js'
@Component({
  name: 'identity-details-dialog'
})
export default class IdentityDetailsDialog extends Vue {
  mounted () {
    return new FaceEarlyWarning()
  }
}
</script>

<style lang="scss">
.identity-details-dialog {
  box-sizing: border-box;
  width: 1311px;
  height: 682px;
  border-radius: 8px;
  background: rgba(1, 19, 67, 0.6);
  padding: 22px 20px 20px 20px;
  text-align: left;
  font-family: 'PingFang Regular';
  box-shadow: 0px 3px 20px 3px rgba(3, 125, 220, 0.7);
  display: flex;
  align-items: center;
  justify-content: space-around;
  .identity-details {
    width: 228px;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #ffffff;
    &-image {
      width: 180px;
      height: 210px;
      margin-bottom: 17px;
    }
    &-video-name {
      font-size: 18px;
      font-family: 'PingFang Regular';
      font-weight: 500;
      color: #FFFFFF;
    }
    &-item {
      display: flex;
      flex-direction: column;
      margin-top: 25px;
      &-title {
        font-size: 14px;
        font-family: 'PingFang Regular';
        font-weight: 500;
        color: #00D2FF;
        display: flex;
        align-items: center;
        span {
          display: inline-block;
          width: 7px;
          height: 7px;
          border-radius: 50%;
          margin-right: 5px;
          background-color: #00D2FF;
        }
      }
      &-content {
        font-size: 12px;
        font-family: 'PingFang Regular';
        font-weight: 400;
        color: #FFFFFF;
      }
    }
  }
  .monitor-list {
    width: calc(100% - 228px - 400px);
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    &-item {
      width: 298px;
      height: 178px;
      border: 1px solid rgba(3, 125, 220, 0.7);
      margin: 0 14px 14px 0;
      padding: 17px 20px;
      box-sizing: border-box;
      &-top {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
        position: relative;
        .warning-icon {
          width: 44px;
          height: 46px;
          position: absolute;
          right: -20px;
          top: -20px;
        }
        .left-img {
          width: 90px;
          height: 90px;
        }
        .right-img {
          width: 90px;
          height: 90px;
        }
        &-center {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          flex-direction: column;
          width: calc(100% - 180px);
          div:nth-child(1) {
            font-weight: bold;
            font-size: 14px;
            color: #ffc119;
          }
          div:nth-child(2) {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.76);
            padding-bottom: 10px;
          }
          div:nth-child(3) {
            box-sizing: border-box;
            padding-left: 5px;
            width: 100%;
            height: 10px;
          }
        }
      }
      &-bottom {
        div {
          font-size: 14px;
          font-family: 'PingFang Regular';
          font-weight: 400;
          color: #FFFFFF;
          opacity: 0.76;
          display: flex;
          align-items: center;
          img {
            width: 16px;
            height: 16px;
            margin-left: 5px;
          }
        }
      }
    }
    &-footer {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      width: 100%;
      height: 50px;
      .el-pagination {
        height: 30px;
        .btn-prev, .btn-next {
          background-color: #004599 !important;
          color: #CCCCCC !important;
        }
        .el-pager li {
          background-color: #004599 !important;
          color: #CCCCCC !important;
        }
        .el-pager .active {
          background-color: #0072FF !important;
          color: #000D3F !important;
        }
      }
    }
  }
  .action-track-map {
    width: 400px;
    height: 100%;
    border: 1px solid rgba(3, 125, 220, 0.7);
  }
}
</style>
